<template>
  <div class="addActiveDetailinfor">
    <div class="baseInfor-first">
           <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="目标金额" style="width:100%">
                    <el-input v-model="formInline.user" placeholder="目标金额"></el-input>
                </el-form-item>
                <el-form-item label="商品名称">
                  <el-input v-model="formInline.user" placeholder="商品名称"></el-input>
                </el-form-item>
                <el-form-item label="价格">
                  <el-col :span="10">
                     <el-input v-model="formInline.user" placeholder="商品名称"></el-input> 
                  </el-col>
                  <el-col class="line" :span="1" style="margin:0 5px 0 3px;">到</el-col>
                  <el-col :span="10">
                      <el-input v-model="formInline.user" placeholder="最高价格"></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item label="商品分类">
                  <el-select v-model="formInline.region" placeholder="选择分类">
                    <el-option label="分类1" value="shanghai"></el-option>
                    <el-option label="分类2" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">搜索</el-button>
                </el-form-item>
            </el-form>
      </div>
      <div class="baseInfor-second">
        <div class="baseInfor-second-left">
            <div><el-checkbox v-model="checked"></el-checkbox></div>
            <div><img src="~/assets/de.png"/></div>
            <div style="width:50%">
              <p>山田studio山田studio</p>
              <p>山田studio山田studio</p>
              <p>ID:82364262524</p>
            </div>
            <div class="infor-put">
               <el-form :inline="false" :model="formInline" class="demo-form-inline">
                    <el-form-item label="换购价格" >
                        <el-input v-model="formInline.user" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="商品数量">
                        <el-input v-model="formInline.user" placeholder=""></el-input>
                    </el-form-item>
               </el-form>
            </div>
        </div>
        <div class="baseInfor-second-right">
            <div><el-checkbox v-model="checked"></el-checkbox></div>
            <div><img src="~/assets/de.png"/></div>
            <div style="width:50%">
              <p>山田studio山田studio</p>
              <p>山田studio山田studio</p>
              <p>ID:82364262524</p>
            </div>
            <div class="infor-put">
               <el-form :inline="false" :model="formInline" class="demo-form-inline">
                    <el-form-item label="换购价格" >
                        <el-input v-model="formInline.user" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="商品数量">
                        <el-input v-model="formInline.user" placeholder=""></el-input>
                    </el-form-item>
               </el-form>
            </div>
        </div>
      </div>
      <div class="active-button">
          <el-row>
            <el-button type="primary" round>主要按钮</el-button>
            <el-button type="success" round>成功按钮</el-button>
          </el-row>
      </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        formInline: {
          user: '',
          region: '',
          checked: true
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>

<style lang="scss">
.baseInfor-first{
  background-color: #ffffff;
   margin-top:80px;
   padding:20px 50px;
   height:150px;
     &:before {
      content: "";
      display: block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #333856;
      position: relative;
      left:-23px;
      top:23px;
    }
   .el-input__inner {
    height: 25px;
    width: 120px;
    background-color: #f0f5fb;
    border-radius: 9px;
    vertical-align: middle;
    border: none;
    padding: 0 10px;
    text-align: center;
    font-size: 13px;
    margin-right:12px;
  }
     .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 16px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
  .el-icon-arrow-up:before {
    content: "\E605";
    position: relative;
    left: 12px;
  }
 .el-button--primary{
    padding-left: 17px;
    padding-right: 17px;
    height: 30px;
    line-height:8px;
    border:none;
    background-color: #333856;
    border-radius: 5px;
    color: #fff;
 }
}
.baseInfor-second{
  background-color: #ffffff;
  border-top: 1px solid #bdbdbd;
   padding:20px 50px;
   height:220px;
    .baseInfor-second-left{
    width:50%;
    float: left;
    div{
      float: left;
      margin-right: 30px;
      :nth-last-child(1){
        line-height: 60px;
      }
     }
     div:first-child .el-checkbox{
       position: relative;
       top:15px;
     }
     .el-checkbox__inner{
       border-radius: 50px;
     }
     .infor-put{
          margin-left: 40px;
          .el-form-item {
              margin-bottom: -15px;
             }
          .el-form-item__label {
          text-align: right;
          vertical-align: middle;
          float: left;
          font-size: 16px;
          color: #606266;
          line-height: 40px;
          padding: 0 12px 0 0;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          }
          .el-input__inner{
            width:150px;
            height:25px;
            border-radius: 10px;
            position: relative;
            top:-10px;
          }
        }
    }
    .baseInfor-second-right{
    width:50%;
    float: right;
    div{
      float: left;
      margin-right: 30px;
      :nth-last-child(1){
        line-height: 60px;
      }
     }
     div:first-child .el-checkbox{
       position: relative;
       top:15px;
     }
     .el-checkbox__inner{
       border-radius: 50px;
     }
          .infor-put{
          margin-left: 40px;
          .el-form-item {
              margin-bottom: -15px;
             }
          .el-form-item__label {
          text-align: right;
          vertical-align: middle;
          float: left;
          font-size: 16px;
          color: #606266;
          line-height: 40px;
          padding: 0 12px 0 0;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          }
          .el-input__inner{
            width:150px;
            height:25px;
            border-radius: 10px;
            position: relative;
            top:-10px;
          }
        }
    }
    .active-button{
      width:100px;
    }
    .el-row{
        padding:10px  50px;
      }
   }
</style>
